<template>
  <!-- 设置圈子基本信息页面 -->
  <view class="main">
    <view class="content">
      <view class="row" @click="prompt">
        <view class="left">
          <text class="xing">*</text>
          <text class="name">名称</text>
        </view>
        <view class="right">
          <text>{{ title }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="row" @tap="clk">
        <view class="left">
          <text class="xing">*</text>
          <text class="name">头像</text>
        </view>
        <view class="right">
          <image
            src="../../imges/head_kong.png"
            mode="aspectFill"
            class="photo"
            v-if="photo == ''"
          ></image>
          <image
            :src="photo"
            mode="aspectFill"
            class="photo"
            v-if="photo != ''"
          ></image>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="row" @click="prompt1">
        <view class="left">
          <text class="xing">*</text>
          <text class="name">介绍</text>
        </view>
        <view class="right">
          <text class="text">{{ content }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
      <navigator
        :url="'/pages/my_circle/customTag?id=' + quan_Id"
        hover-class="none"
        class="row"
      >
        <view class="left">
          <text class="name">标签</text>
        </view>
        <view class="right">
          <text class="text">{{ lable_L }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </navigator>
      <picker
        @change="bindPickerChange"
        :range="array"
        :disabled="guiShuList.length == 0"
        @tap="handleGuiTiS"
      >
        <view class="row">
          <view class="left">
            <text class="name">归属</text>
          </view>
          <view class="right">
            <text class="text">{{ array_yes }}</text>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </picker>
      <navigator
        :url="
          '/pages/my_circle/setupBusiness?id=' +
          businessRange +
          '&name=' +
          businessRangeStr
        "
        hover-class="none"
        v-if="orgDetail.friendsType == 3"
        class="row row3"
      >
        <view class="left">
          <text class="xing">*</text>
          <text class="name">行业</text>
        </view>
        <view class="right">
          <text>{{ businessRangeStr }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </navigator>
    </view>
    <!-- 保存按钮 -->
    <view class="foot_">
      <view class="btn" @tap="handleBaocan"> 保存 </view>
    </view>

    <avatar
      @upload="doUpload"
      quality="1"
      ref="avatar"
      selWidth="250upx"
      selHeight="250upx"
    ></avatar>

    <!-- 名称弹窗 -->
    <prompt
      ref="prompt"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      title="名称"
      :cost="title"
    ></prompt>
    <!-- 介绍弹窗 -->
    <prompt
      ref="prompt1"
      @onConfirm="onConfirm1"
      @onCancel="onCancel1"
      title="介绍"
      :textarea="content"
    ></prompt>
  </view>
</template>
<script>
import request from "../../utils/request.js";
import prompt from "../../components/prompt.vue";
import avatar from "../../components/yq-avatar/yq-avatar.vue"; //图片剪裁
export default {
  data() {
    return {
      title: "", //名称
      photo: "", //头像
      array: ["个人（默认）"], //归属数组
      array_yes: "", //归属
      content: "",
      orgDetail: {}, //圈子详情
      guiShuList: [], //归属列表
      arrayId: "", //归属id
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      businessRangeStr: "", //行业
      businessRange: "", //行业id
      labelLists: [], //标签数组
      lable_L: "", //标签
      urls: [],
    };
  },
  components: {
    prompt,
    avatar,
  },
  onShow() {
    if (uni.getStorageSync("quanzihangye")) {
      this.businessRangeStr = uni.getStorageSync("quanzihangye").industry; //行业
      this.businessRange = uni.getStorageSync("quanzihangye").id;
    }
    this.handleDetail_lable();
  },
  onLoad(options) {
    this.quan_Id = options.id;
    this.handleGuiShu(); //归属
    this.handleDetail();
    request({
      //上传图片参数
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
      },
      data: {},
    }).then((res) => {
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    clk() {
      this.$refs.avatar.fChooseImg(2, {
        selWidth: "400upx",
        selHeight: "400upx",
        inner: false,
        canRotate: false,
      });
    },
    doUpload(rsp) {
      this.$set(this.urls, rsp.index, rsp.path);
      this.photo = rsp.path;
      uni.uploadFile({
        url: "https://up-z0.qiniup.com",
        filePath: rsp.path,
        name: "file",
        formData: {
          token: this.upToken,
        },
        success: (uploadFileRes) => {
          this.photo = this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
          // console.log(JSON.parse(uploadFileRes.data).key,this.fileUrl)
        },
      });
    },
    handleGuiTiS() {
      if (this.guiShuList.length == 0) {
        uni.showToast({
          title: "暂无归属",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
    },
    handleBaocan() {
      //点击保存
      if (this.title == "") {
        uni.showToast({
          title: "未设置圈子名称",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.photo == "") {
        uni.showToast({
          title: "未设置圈子头像",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.content == "") {
        uni.showToast({
          title: "未设置圈子介绍",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/updateFriends",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgName: this.title,
            orgUrl: this.photo,
            coverUrl: "",
            orgIntroduce: this.content,
            dependencyId: this.arrayId,
            businessRange: this.businessRange, //行业id
            id: this.quan_Id,
            labelLists: this.labelLists, //标签数组
            friendsType: this.orgDetail.friendsType,
          },
        }).then((res) => {
          // console.log(res, '发现圈子')
          if (res.data.code == 200) {
            uni.showToast({
              title: "保存成功",
              duration: 1500,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 2,
              });
            }, 1500);
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleDetail() {
      //圈子基本信息渲染
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quan_Id,
          },
        }).then((res) => {
          // console.log(res, '圈子')
          if (res.data.code == 200) {
            this.orgDetail = res.data.data;
            this.title = res.data.data.orgName;
            this.photo = res.data.data.orgUrl;
            this.content = res.data.data.orgIntroduce;
            this.arrayId = res.data.data.dependencyId;
            this.array_yes = res.data.data.dependencyIdStr
              ? res.data.data.dependencyIdStr
              : "个人（默认）";
            this.businessRangeStr = res.data.data.businessRangeStr;
            this.businessRange = res.data.data.businessRange;
            this.lable_L = res.data.data.friendsLists.join("/")
              ? res.data.data.friendsLists.join("/")
              : "请选择";
            this.labelLists = res.data.data.friendsLists;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleDetail_lable() {
      //标签
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quan_Id,
          },
        }).then((res) => {
          // console.log(res, '圈子')
          if (res.data.code == 200) {
            // this.orgDetail = res.data.data
            // this.title = res.data.data.orgName
            // this.photo = res.data.data.orgUrl
            // this.content = res.data.data.orgIntroduce
            // this.array_yes = res.data.data.dependencyIdStr
            // this.businessRangeStr = res.data.data.businessRangeStr
            this.lable_L = res.data.data.friendsLists.join("/");
            this.labelLists = res.data.data.friendsLists;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleGuiShu() {
      //获取归属
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/org/getCreationAscriptionOrg",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            this.guiShuList = res.data.data;
            let arr = [];
            res.data.data.forEach((v) => {
              arr.push(v.orgName);
            });
            this.array = ["个人（默认）", ...arr];
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    selctPhone(e) {
      //点击上传图片
      // let that = this;
      uni.chooseImage({
        count: 1,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          // console.log(tempFilePaths)
          uni.uploadFile({
            url: "https://up-z0.qiniup.com",
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              token: this.upToken,
            },
            success: (uploadFileRes) => {
              this.photo =
                this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
              uni.showToast({
                title: "上传成功",
                duration: 1500,
                icon: "none",
              });
            },
          });
        },
      });
    },
    // 弹窗事件
    prompt: function () {
      this.$refs.prompt.show();
    },
    prompt1: function () {
      this.$refs.prompt1.show();
    },
    onConfirm1: function (e) {
      // console.log(e)
      if (e.trim() == "") {
        uni.showToast({
          title: "请先输入！",
          duration: 1500,
          icon: "none",
        });
        return;
      } else {
        if (e.trim().length > 100) {
          uni.showToast({
            title: "介绍不可超过100字！",
            duration: 1500,
            icon: "none",
          });
          return false;
        }
        this.$refs.prompt1.hide();
        this.content = e.trim();
      }
    },
    onCancel1: function () {
      this.$refs.prompt1.hide();
    },
    onConfirm: function (e) {
      // console.log(e);
      let _cost = e.trim();
      if (_cost == "") {
        uni.showToast({
          title: "请先输入！",
          duration: 1500,
          icon: "none",
        });
        return;
      } else {
        this.$refs.prompt.hide();
        this.title = _cost;
      }
    },
    onCancel: function () {
      this.$refs.prompt.hide();
      this.$refs.prompt.cost = "";
    },
    bindPickerChange(e) {
      if (this.guiShuList.length == 0) {
        return false;
      }

      this.array_yes = this.array[e.detail.value];
      if (e.detail.value == 0) {
        this.arrayId = "";
        return false;
      }
      this.arrayId = this.guiShuList[e.detail.value - 1].id;
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}
.content {
  margin-top: 20rpx;
  padding: 0 32rpx;
  background-color: #fff;

  .row {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    border-bottom: 2rpx solid rgba(238, 238, 238, 1);

    &:last-child {
      border-bottom: none;
    }

    .left {
      display: flex;
      height: 100%;
      align-items: center;

      .xing {
        color: #f81414;
        margin-right: 10rpx;
        font-size: 40rpx;
        display: inline-block;
        margin-bottom: -18rpx;
      }

      .name {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #464646;
      }
    }

    .right {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      display: flex;
      align-items: center;

      .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 535rpx;
        text-align: right;
      }

      image {
        width: 18rpx;
        height: 35rpx;
        margin-left: 22rpx;
        vertical-align: top;
      }

      .photo {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
      }
    }
  }

  .row3 {
    border-top: 2rpx solid rgba(238, 238, 238, 1);
  }
}

.foot_ {
  width: 750rpx;
  height: 100rpx;
  background-color: #fff;
  border-top: 2rpx solid #eee;
  position: fixed;
  bottom: 0;
}

.btn {
  width: 686rpx;
  height: 74rpx;
  background: #2168eb;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0 auto;
  margin-top: 18rpx;
}
</style>
